<template>
  <div class="cityListClass">
    <div class="top">
      <div class="title">城市列表</div>
      <div class="closeClass" @click="closeClick()"></div>
    </div>
     <div class="hotCityWrap">
        <div class="hotCityNameWrap">
            <div class="hotCityNameItem" v-for="item in hotCitys "
                                        @click="cityItemClick(item)"
            >{{item.shortName}}</div>
        </div>
         <div class="hotCityLetters">
             <div class="hotCityLetterItem" v-for="(item,index) in letters"
                                            :key="index"
                                            @click="hotCityLetterClick(index)"
             >{{item}}</div>
         </div>
     </div>
      <div class="cityListWrap">
          <div class="rightWrap directlyCitysClass" >
              <div class="rightItem">
                  <div class="provinceName">直辖市：</div>
                  <div class="cityNames">
                      <div class="cityNameItem" v-for="item in directlyCitys"
                                                @click="cityItemClick(item)"
                      >{{item.shortName}}</div>
                  </div>
              </div>
          </div>
          <div class="cityListMain">
              <div class="cityListItem" v-for="item in cityList">
                  <div class="leftLetter">{{item.letter}}</div>
                  <div class="rightWrap" >
                      <div class="rightItem" v-for="ele in item.list">
                          <div class="provinceName"  @click="cityItemClick(ele)"
                          >{{ele.shortName}}：</div>
                          <div class="cityNames">
                              <div class="cityNameItem" v-for="city in ele.children"
                                                        @click="cityItemClick(city)"
                              >{{city.shortName}}</div>
                          </div>
                      </div>

                  </div>
              </div>

          </div>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class CityList extends Vue {
  @Prop() private letters: any;
  @Prop() private hotCitys: any;
  @Prop() private directlyCitys: any;
  @Prop() private cityList: any;

  private heightArray: any = [];
  private closeClick(){
      this.$store.dispatch('cityListModule/isShowCityListWrapEmit', false);
  }
  private  getHeight(){
      let sum = 0;
      let tempArr = [0];
      $('.leftLetter').each(function(){
          let height = $(this).outerHeight();
          if(height){
              sum += height;
          }
          tempArr.push(sum)
      });
      tempArr.forEach(item =>{
          item = item + 45;
          this.heightArray.push(item);
      });
  }
  private cityItemClick(item: any){
      this.$store.dispatch('cityListModule/checkedCityObjEmit',item);
      this.$store.commit('ZhtsModule/setDistrict',item);
      this.$store.dispatch('cityListModule/isShowCityListWrapEmit', false);

      // 传一次空的outchangeid 为了避免可能出现的两次不同场景更改相同id时 表面城市显示异常问题
      this.$store.dispatch('cityListModule/outChangeidEmit','');

      // 傳參給父組件方法
      this.$emit('fatherMethod', item);
  }
  private   hotCityLetterClick(index: number){
      $('.cityListWrap').animate({scrollTop:this.heightArray[index]},500)
  }
  private mounted(){
      setTimeout(()=>{
          this.getHeight();
      },200)

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.cityListClass{
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: #4c4c4c;
  .top{
    height: 55px;
      line-height: 55px;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    font-size: 20px;
    color: #edfed7;

      .closeClass{
        position: absolute;
        top: -34px;
        right: -37px;
        cursor: pointer;
        width: 77px;
        height: 76px;
        background: url("../../assets/img/zhts/close-bg.png") no-repeat;
      }
  }
  .hotCityWrap{
     padding:0 14px 0 22px;
     box-sizing: border-box;
      color: #cee5f0;
      .hotCityNameWrap{
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
          .hotCityNameItem{
              &:first-of-type{
                  font-weight: bold;
              }
              margin: 5px 6px 0 5px;
              cursor: pointer;

          }
      }
      .hotCityLetters{
          display: flex;
          flex-wrap: wrap;
          padding: 12px 0;
          box-sizing: border-box;
          border-bottom: 2px dashed #65d4d7;
          .hotCityLetterItem{
              margin: 0 8px;
              cursor: pointer;
          }
      }
  }
  .cityListWrap{
      width: 100%;
      height: calc(100% - 170px);
      overflow-y: auto;
      padding: 13px 20px 10px 20px;
      box-sizing: border-box;
      .cityListMain{
           .cityListItem{
               display: flex;
               flex-wrap: nowrap;
               .leftLetter{
                   width: 50px;
                   font-size: 40px;
                   font-weight: bolder;
                   color:#dbf2fe ;
                   cursor: pointer;
               }
           }
      }
      .directlyCitysClass{
          margin-left: 50px;
          margin-bottom: 12px;
      }
      .rightWrap{
          color: #cee5f0;
          width: calc(100% - 50px);
          .rightItem{
              display: flex;
              flex-wrap: nowrap;
              margin-bottom: 8px;
              .provinceName{
                  width: 80px;
                  font-weight: bolder;
                  cursor: pointer;
              }
              .cityNames{
                  width: calc(100% - 80px);
                  display: flex;
                  flex-wrap: wrap;
                  .cityNameItem{
                      margin-left: 10px;
                      margin-bottom: 4px;
                      cursor: pointer;
                  }
              }
          }

      }

  }
}

::-webkit-scrollbar{
    width: 8px;
    height:8px;
   background-color:rgba(0,0,0,.0);
}
/*滚动条的轨道*/
::-webkit-scrollbar-track{
    background-color:rgba(0,0,0,.0);
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
    width: 8px;
    border-radius: 3px;
    //border-left:1px solid #014081;
    //border-right:1px solid #014081 ;
    //background-color: #014081;
   // outline-offset:-2px;
   // border-left: 1px solid #ccc;
   // border-right: 1px solid #ccc;
   // background-color: #ccc;
    background-image: url("../../assets/img/zhts/scroll.png");

}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button{
    height: 0;
   // background-color: #e5edee;
}

</style>
